<template>
  <div class="form">
    <div class="title">对公信息变更</div>
    <ul class="fromul">
      <li>
        <div>单位名称</div>
        <div><input type="text" placeholder="请输入单位名称"></div>
        <div></div>
      </li>
      <li>
        <div>经办人姓名</div>
        <div id="selectManage"><input type="text" readonly="readonly" placeholder="请选择联先人" v-model="managername"
                                      @click="selectPerson"></div>
        <div></div>
      </li>
      <li>
        <div>手机号码</div>
        <div><input type="text" placeholder="请输入手机号"></div>
        <div>
          <button style="padding:3px 10px;">获取</button>
        </div>
      </li>
      <li>
        <div>验证码</div>
        <div><input type="text" placeholder="请输入验证码"></div>
        <div></div>
      </li>
    </ul>
    <button id="nextStep" @click="nextStep">
      下一步
    </button>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  import {Actionsheet} from 'mint-ui';

  export default {
    name: "agent",
    data() {
      return {
        managername: "",
        actions: [{
          name: '拍照',
          method: this.getCamera	// 调用methods中的函数
        }, {
          name: '从相册中选择',
          method: this.getLibrary	// 调用methods中的函数
        }],
        // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
        sheetVisible: false
      }
    },
    methods: {
      selectPerson() {
        this.sheetVisible = true;
      },
      sureSelect(manager) {

      },
      cancelSelect() {

      }, nextStep() {
        this.$router.push({path: "/cards", query: {}})
      }
    }

  }
</script>

<style scoped lang="less">
  .form {
    .fromul {
      padding: 0 10px;
      margin: 0;
      list-style-type: none;
      li {
        display: flex;
        flex: 7;
        height: 50px;
        align-items: center;
        border-bottom: 1px solid #ddd;
        > div:first-child {
          flex: 2;
          text-align: left;
        }
        > div:nth-child(2) {
          flex: 4;
          input {
            margin: 0;
            border: 0;
            font-size: 15px;
            height: 20px;
          }
        }
        > div:last-child {
          flex: 1;
          button {
            border: 0;
            border-radius: 40px;
            background: dodgerblue;
            color: white;
          }
        }
      }

      #selectManage {
        position: relative;
        &::before {
          position: absolute;
          width: 20px;
          height: 20px;
          right: 10px;
          bottom: 0px;
          color: #999;
          pointer-events: none;
          content: '\25BC';
        }
      }
    }
  }
</style>
